<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div class="head-form" v-if="crud.props.searchToggle">
        <!-- 订单状态 -->
        <el-radio-group
          @change="onChangeStatus"
          class="filter-item"
          v-model="status"
          size='small'
        >
          <template v-for="item in pageStatus">
            <el-radio-button 
              :key="item.id" 
              :label="item.id"
            >
            {{item.text}}
            </el-radio-button>
          </template>
        </el-radio-group>
        <!-- 订单时间 -->
        <span>订单时间：</span>
        <el-date-picker
          v-model="defaultDate"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始时间"
          end-placeholder="结束日期"
          @change="onChangeTime"
        />
        <!-- 出库方式 -->
        <el-select
          v-model='query.deliveryType'
          clearable
          size='small'
          placeholder='出库方式'
          class='filter-item'
          style='width: 100px'
          @change="crud.toQuery"
        >
          <template v-for="item in deliveryTypes">
            <template v-if="item.id != 10">
              <el-option
                :key='item.id'
                :label='item.text'
                :value='item.id'
              />
            </template>
          </template>
        </el-select>
        <!-- 药品类型 -->
        <el-select
          v-model='query.drugType'
          clearable
          size='small'
          placeholder='药品类型'
          class='filter-item'
          style='width: 100px'
          @change="crud.toQuery()"
        >
          <el-option
            v-for='item in drugTypes'
            :key='item.id'
            :label='item.text'
            :value='item.id'
          />
        </el-select>
        <!-- 订单号 -->
        <el-input
          v-model="query.deliveryNo"
          placeholder="输入订单号"
          size='small'
          class="filter-item"
          style="width: 100px"
        />
        <rrOperation class="rr-operation" :crud="crud" @resetQuery="onResetQuery"/>
      </div>
      <crudOperation :permissions="permission" />
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading" 
      :data="crud.data"
      @selection-change="crud.selectionChangeHandler"
      @sort-change="crud.sortChange"
    >
      <el-table-column v-if="columns.visible('deliveryNo')" label="出库单号" prop="deliveryNo"/>
      <el-table-column v-if="columns.visible('drugType')" label="药品类型" prop="drugType">
        <template v-slot="{ row }">
          <template v-if="row.drugType === 7">西药及中成药</template>
          <template v-if="row.drugType === 1">饮片</template>
          <template v-if="row.drugType === 2">颗粒剂</template>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('deliveryType')" label="出库方式" prop="deliveryType">
        <template v-slot="slot">
          <deliveryType :typeValue="slot.row.deliveryType"></deliveryType>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('deliveryQuantity')" label="出库药品数" prop="deliveryQuantity"/>
      <el-table-column v-if="columns.visible('collectDeptName')" label="出库成本" prop="collectDeptName"/>
      <el-table-column v-if="columns.visible('checkTime')" label="出库日期" prop="checkTime" sortable="custom">
        <template v-slot="slot">{{parseTime(slot.row.checkTime)}}</template>
      </el-table-column>
      <el-table-column v-if="columns.visible('collectUseName')" label="领用人员" prop="collectUseName"/>
      <el-table-column v-if="columns.visible('checkUserName')" label="出库人" prop="checkUserName"/>
      <el-table-column v-if="columns.visible('status')" label="订单状态" prop="status">
        <template slot-scope="scope">{{statusByText(scope.row.status)}}</template>
      </el-table-column>
      <el-table-column v-if="columns.visible('remark')" label="备注" prop="remark"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- <div>{{scope.row.status}}</div> -->
          <template v-if="scope.row.status == '1'">
            <el-button
              v-permission="['admin', 'drugDelivery:edit']"
              @click="onEdit(scope.row.id)"
              type="text"
            >出库</el-button>
            <el-button
              v-permission="['admin', 'drugDelivery:cancel']"
              @click="onCancel(scope.row.id)"
              type="text"
            >取消</el-button>
          </template>
          <template v-if="scope.row.status == '2' || scope.row.status == '3'">
            <el-button
              v-permission="['admin', 'drugDelivery:detail']"
              @click="showDetail(scope.row.id)"
              type="text"
            >查看</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
    <!-- 弹窗 -->
    <el-dialog
      :width="dialogWidth"
      append-to-body 
      top="10vh"
      title="出库信息"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
    >
      <deliveryInfo
        v-if="showDialog"
        :operation="operation"
        :deliveryId="deliveryId"
        @close="showDialog=false"
        @success="onSuccess"
      >
      </deliveryInfo>
    </el-dialog>
    <importDelivery
      ref="importDelivery"
      @success="onSuccess"
    />
  </div>
</template>

<script>
import CRUD, { presenter, header } from '@crud/crud';
import rrOperation from '@crud/RR.operation';
import crudOperation from '@crud/CRUD.operation';
import pagination from '@crud/Pagination';
import deliveryType from './module/deliveryType';
import {parseTime} from '@/utils/index';
import deliveryInfo from './module/deliveryInfo';
import { cancelDrugDelivery } from '@/api/storageRoom/drugDelivery';
import { mapGetters } from 'vuex';
import importDelivery from './module/import';

let defaultCrud = CRUD({
  title: '出库',
  url: 'drugdelivery/getList',
  query: {
    deliveryNo: null,
    status: null,
    deliveryType: null,
    startTime: null,
    endTime: null,
    drugType: null
  }
});

export default {
  name: "drugDelivery",
  components: { crudOperation, rrOperation, pagination, deliveryType, deliveryInfo, importDelivery },
  mixins: [presenter(defaultCrud), header()],
  data() {
    return {
      permission: [
        {
          type: "add",
          name: "新增出库",
          position: 1,
          permission: ['admin', 'drugDelivery:add'],
          handleClick: "onAdd"
        },{
          type: "download",
          name: "导入出库单",
          position: 1,
          permission: ['admin', 'drugDelivery:batchImport'],
          handleClick: "onImport"
        }
      ],
      // 所有状态
      statusList: [
        {id: 1, text: '待出库'},
        {id: 2, text: '已出库'},
        {id: 3, text: '已取消'}
      ],
      // 页面可筛选的状态
      pageStatus: [
        {id: 0, text: '全部'},
        {id: 1, text: '待出库'},
        {id: 2, text: '已出库'}
      ],
      // 药品类型
      drugTypes: [
        { id: 7, text: "西药及中成药" },
        { id: 1, text: "中药饮片" },
        { id: 2, text: "颗粒剂" },
      ],
      defaultDate: null,
      showDialog: false,
      operation: 0,
      deliveryId: null,
      status: 0
    }
  },
  computed: {
    ...mapGetters(["deliveryTypes"]),
    dialogWidth() {
      return window.innerWidth * 0.8 + "px";
    }
  },
  mounted() {
    let operation = this.$router.currentRoute.params.operation;
    if(operation) {
      this.operation = 3;
      this.deliveryId = null;
      this.showDialog = true;
      this.$router.currentRoute.params.operation = 0;
    }
    if(this.query.startTime && this.query.endTime) {
      this.defaultDate = [
        this.query.startTime,
        this.query.endTime
      ]
    }
    if(this.query.status == null) {
      this.status = 0;
    } else {
      this.status = this.query.status;
    }
  },
  methods: {
    parseTime,
    showDetail(id) {
      this.operation = 2;
      this.deliveryId = id;
      this.showDialog = true;
    },
    statusByText(status) {
      return this.statusList[status - 1].text;
    },
    onChangeTime() {
      if(this.defaultDate && this.defaultDate.length) {
        this.query.startTime = this.defaultDate[0];
        this.query.endTime = this.defaultDate[1];
      } else {
        this.query.startTime = null;
        this.query.endTime = null;
      }
      this.crud.toQuery();
    },
    onAdd() {
      this.operation = 0;
      this.deliveryId = null;
      this.showDialog = true;
    },
    onEdit(id) {
      this.operation = 1;
      this.deliveryId = id;
      this.showDialog = true;
    },
    onCancel(id) {
      this.$confirm('将要删除该订单?, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelDrugDelivery(id).then(() => {
          this.onSuccess();
          this.$notify({
            title: "操作成功",
            type: "success"
          });
        });
      }); 
    },
    onSuccess() {
      this.showDialog = false;
      this.operation = 0;
      this.crud.toQuery();
    },
    onResetQuery() {
      this.defaultDate = null;
    },
    onImport() {
      this.$refs.importDelivery.show = true;
    },
    onChangeStatus() {
      if(this.status === 0) {
        // 查询全部状态传null
        this.query.status = null;
      } else {
        this.query.status = this.status;
      }
      this.crud.toQuery();
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .head-container {
    .head-form {
      align-items: center;
      margin-top: -10px;
      flex-wrap: wrap;
      display: flex;

      .filter-item {
        margin: 0 10px 0 0;
      }

      .date-item {
        margin: 0 10px 0 0;
      }

      .rr-operation {
        margin-top: 10px;
      }
    }
  }
}
</style>